<template>
  <div class="contenbox">
    <!-- 导入全局组件 -->
    <!-- 靠右的按钮 -->
    <page-tools>
      <template v-slot:before>
        <span>权限数量{{ counts }}</span>
      </template>
      <template v-slot:after>
        <el-button v-if="assignPerm('add-but')" type="primary" size="small" autofocus @click="addFn">添加权限</el-button>
      </template>
    </page-tools>

    <!-- 表格组件 -->
    <!-- 表格 -->
    <!--
          表格渲染成树形结构的条件
          1.数据中需要有children树形
          2.必须给el-table组件添加row-key属性,用于优化表格样式

       -->
    <el-table :data="permissList" border row-key="id" default-expand-all>
      <el-table-column align="left" label="名称" prop="title" />
      <el-table-column align="center" label="标识" prop="code" />
      <el-table-column align="center" label="描述" prop="description" />
      <el-table-column align="center" label="操作">
        <template v-slot="{row}">
          <!-- 因为项目只有页面权限和按钮权限,因此不存在3级权限
            所以需要对二级权限点的添加按钮隐藏
             -->
          <el-button v-if="row.pid==='0'&&assignPerm('add-but')" type="text" @click="secondFn(row.id)">添加</el-button>
          <el-button v-if="assignPerm('edit-but')" type="text" @click="editFn(row.id)">编辑</el-button>
          <el-button v-if="assignPerm('dele-but')" type="text" @click="deleFn(row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页器 -->
    <!-- <el-pagination
      :current-page="currentPage"
      :page-sizes="[4, 6, 6, 10]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->

    <!-- 新增弹窗dialog -->
    <!-- 放置一个弹层 用来编辑新增节点 -->
    <el-dialog :title="formData.id?'编辑权限':'新增权限'" :visible="showDialog" @close="btnCancel">
      <!-- 表单 -->
      <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="权限名称" prop="title">
          <el-input v-model="formData.title" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formData.code" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="formData.description" style="width:90%" />
        </el-form-item>
        <el-form-item label="层级类型">
          <el-switch
            v-model="formData.type"
            active-value="2"
            inactive-value="1"
          />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="confirmFn">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
// 导入获取权限列表接口

import { getPermissionsList, deletePermissions, addPermissions, detailPermissions, editPermissions, countPermissions } from '@/api/permission'

// 导入渲染树形结构数据

import { listToTree } from '@/utils/index'
export default {
  data() {
    return {
      // 权限渲染数据列表
      limit: 1000,
      start: 0,
      // 权限点数量
      counts: 0,
      // count: 0,
      // currentPage: 1,
      // 表单数据
      formData: {
        title: '', // 名称
        code: '', // 标识符
        description: '', // 描述
        pid: '0', // 父权限 id 没有的话就是 0
        type: '1' // 层级类型 1 或者 2
      },
      // 校验规则
      rules: {
        title:
        [
          { required: true, message: '权限点名称不能为空', trigger: 'blur' }
        ],
        code:
         [
           { required: true, message: '权限标识不能为空', trigger: 'blur' },
           { min: 2, max: 15, message: '权限名称2-15字符', trigger: 'blur' }
         ],
        description:
         [
           { required: true, message: '权限描述不能为空', trigger: 'blur' },
           { min: 2, max: 50, message: '权限描述2~50字符', trigger: 'blur' }
         ]
      },
      // 权限数据
      permissList: [],
      // 显示隐藏
      showDialog: false
    }
  },
  async created() {
    // 调用接口获取数据
    this.getPermissionsList()

    // 调用接口获取权限点数量
    this.counts = await countPermissions()

    // console.log(133, res)
  },
  methods: {
    // 点击编辑权限
    async editFn(id) {
      // 弹起对话框
      this.showDialog = true
      // 根据id获取权限点信息,保存数据回显到表单中
      this.formData = await detailPermissions(id)
    },
    // 删除权限
    deleFn(id) {
      console.log(id)
      // 根据id删除权限点
      this.$confirm('是否删除该权限点', '删除', {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        type: 'warning'
      }).then(async() => {
        console.log('点击确认')
        // 调用接口完成删除权限点
        const res = await deletePermissions(id)

        console.log(res)

        // 成功后提示用户,并重新渲染页面数据
        this.$message.success('删除权限点成功')
        this.getPermissionsList()
      }).catch(() => {
        console.log('取消')
      })
    },
    // 点击确认新增权限函数
    async confirmFn() {
      // 校验表单数据规则
      this.$refs.perForm.validate()

      // 判断当前是新增还是编辑 根据formData.id判断
      if (this.formData.id) {
        // 编辑权限
        // 调用编辑权限接口
        console.log(this.formData)
        const res = await editPermissions(this.formData)
        // 提示用户编辑完成

        console.log(res)
        this.$message.success('编辑权限点完成')
      } else {
        // 新增权限
        // 调用新增权限点接口
        const res = await addPermissions(this.formData)
        console.log(res)
        // 提示用户新增权限完成
        this.$message.success('新增权限点完成')
      }

      // 重新渲染数据
      this.getPermissionsList()

      // 关闭对话框
      this.btnCancel()
    },
    // 点击取消函数
    btnCancel() {
      // 关闭控制框
      this.showDialog = false
      // 清空数据
      this.formData = {
        title: '', // 名称
        code: '', // 标识符
        description: '', // 描述
        pid: '0', // 父权限 id 没有的话就是 0
        type: '1' // 层级类型 1 或者 2
      }
    },
    // 点击添加权限
    addFn() {
      // 显示控制框
      this.showDialog = true
    },
    // 二级权限点击
    secondFn(id) {
      // 显示控制框
      this.showDialog = true
      this.formData.pid = `${id}`
    },
    // 获取所有权限列表
    async getPermissionsList() {
      // 调用接口
      this.permissList = await getPermissionsList({
        _limit: this.limit,
        _start: this.start
      })
      // 判断是否存在子元素
      console.log(227, this.permissList)
      this.permissList = listToTree(this.permissList, '0')
      console.log(220, this.permissList)
    }
    // 分页器数量改变
    // handleSizeChange(val) {
    //   // 改变显示的数量值
    //   this.limit = val

    //   // 重新渲染页面
    //   this.getPermissionsList()
    // },
    // 分页器页数改变
    // handleCurrentChange(val) {
    //   // 修改当前请求的权限点数据,则需要显示当前的数据
    //   this.start = (val - this.currentPage) * this.limit
    //   // console.log(val)
    //   // 重新渲染页面数据
    //   this.getPermissionsList()
    // }

  }
}
</script>

<style lang="scss" scoped>
div[data-v-078753dd]{
  padding: 40px;
}
</style>
